<template>
  <div class="container">
    <div class="search-form">
      <a-button type="primary" @click="loadList()">查询</a-button>
      <a-button type="primary" @click="openAddForm">新增</a-button>
    </div>
    <div class="content-body">
      <a-table
        :columns="columns"
        :data-source="data"
        rowKey="id"
        @change="loadList"
        :pagination="pagination"
      >
        <span slot="auth" slot-scope="text, record">
          <a-tag
            :color="record.is_auth == 0 ? 'geekblue' : 'green'"
          >
            {{ record.is_auth == 0? '不需要': '需要' }}
          </a-tag>
        </span>
        <span slot="operation" slot-scope="text, record">
          <a-button
            type="primary"
            style="margin-left: 5px"
            size="small"
            @click="openUpdateForm(record)"
            >编辑</a-button
          >
          <a-button
            type="danger"
            style="margin-left: 5px"
            size="small"
            @click="remove(record.id)"
            >删除</a-button
          >
        </span>
      </a-table>
    </div>
    <a-drawer
      title="新增接口"
      :width="720"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <a-form
        :form="form"
        layout="vertical"
        @submit="handleAddSubmit"
        hide-required-mark
      >
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="名称">
              <a-input
                v-decorator="[
                  'name',
                  {
                    rules: [{ required: true, message: '请输入名称' }],
                  },
                ]"
                placeholder="请输入名称"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="URL">
              <a-input
                style="width: 100%"
                v-decorator="[
                  'url',
                  {
                    rules: [
                      { required: true, message: '请输入URL' },
                    ],
                  },
                ]"
                placeholder="请输入URL"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="排序">
              <a-input type="number"
                style="width: 100%"
                v-decorator="[
                  'sort',
                  {
                    rules: [
                      { required: true, message: '请输入排序' },
                    ],
                  },
                ]"
                placeholder="请输入排序"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="备注">
              <a-input
                v-decorator="[
                  'remark',
                  {
                    rules: [{ message: '请输入备注' }],
                  },
                ]"
                placeholder="请输入备注"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="是否需要权限">
              <a-radio-group v-decorator="[
                  'is_auth',
                  {
                    rules: [{ required: true, message: '请选择是否需要权限' }],
                  },
                ]"
              >
                <a-radio value="0">
                  不需要
                </a-radio>
                <a-radio value="1">
                  需要
                </a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          取消
        </a-button>
        <a-button type="primary" @click="handleAddSubmit"> 保存 </a-button>
      </div>
    </a-drawer>
    <a-drawer
      title="编辑接口"
      :width="720"
      :visible="visibleForUpdate"
      :body-style="{ paddingBottom: '80px' }"
      @close="onCloseForUpdate"
    >
      <a-form
        :form="formForUpdate"
        layout="vertical"
        @submit="handleUpdateSubmit"
        hide-required-mark
      >

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="名称">
              <a-input
                v-decorator="[
                  'name',
                  {
                    rules: [{ required: true, message: '请输入名称' }],
                    initialValue: tempForm.name,
                  },
                ]"
                placeholder="请输入名称"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="URL">
              <a-input
                style="width: 100%"
                v-decorator="[
                  'url',
                  {
                    rules: [
                      { required: true, message: '请输入URL' },
                    ],
                    initialValue: tempForm.url,
                  },
                ]"
                placeholder="请输入URL"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="排序">
              <a-input type="number"
                v-decorator="[
                  'sort',
                  {
                    rules: [{  message: '请输入排序' }],
                    initialValue: tempForm.sort,
                  },
                ]"
                placeholder="请输入排序"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="备注">
              <a-input
                style="width: 100%"
                v-decorator="[
                  'remark',
                  {
                    rules: [
                      { message: '请输入备注' },
                    ],
                    initialValue: tempForm.remark,
                  },
                ]"
                placeholder="请输入备注"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="是否需要权限">
              <a-radio-group v-decorator="[
                  'is_auth',
                  {
                    rules: [{ required: true, message: '请选择是否需要权限' }],
                    initialValue: tempForm.is_auth,
                  },
                ]"
              >
                <a-radio value="0">
                  不需要
                </a-radio>
                <a-radio value="1">
                  需要
                </a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onCloseForUpdate">
          取消
        </a-button>
        <a-button type="primary" @click="handleUpdateSubmit"> 保存 </a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
const columns = [
  {
    title: "名称",
    dataIndex: "name",
  },
  {
    title: "URL",
    dataIndex: "url",
  },
  {
    title: "是否需要权限",
    dataIndex: "is_auth",
    scopedSlots: { customRender: "auth" },
  },
  {
    title: "排序",
    dataIndex: "sort",
  },
  {
    title: "备注",
    dataIndex: "remark",
  },
  {
    title: "操作",
    dataIndex: "id",
    scopedSlots: { customRender: "operation" },
  },
];
export default {
  name: "List",
  data() {
    return {
      pagination: {
        showTotal: (total) => `总 ${total} 条`,
        showSizeChanger: true,
        current: 1,
        pageSize: 10,
        total: 0,
      },
      data: [],
      columns,
      form: {},
      formForUpdate: {},
      tempForm: {},
      visible: false,
      visibleForUpdate: false,
      allMenuList: [],
      user: JSON.parse(sessionStorage.getItem('userInfo'))
    };
  },
  mounted() {
    this.loadList();
  },
  methods: {
    loadList(page, pageSize) {
      if (page) {
        this.pagination = page;
      }
      this.$ajax({
        url: this.$api.system.api.findApiPage,
        data: Object.assign(
          {},
          {
            pageNo: this.pagination.current,
            pageSize: this.pagination.pageSize,
          }
        ),
        success: (result) => {
          this.data = result.results;
          const pager = { ...this.pagination };
          pager.total = result.totalRecord;
          pager.current = result.pageNo;
          pager.pageSize = result.pageSize;
          this.pagination = pager;
        },
      });
    },
    openAddForm() {
      this.form = this.$form.createForm(this, { name: "add" });
      this.visible = true;
    },
    openUpdateForm(item) {
      this.formForUpdate = this.$form.createForm(this, { name: "update" });
      this.tempForm = item;
      this.visibleForUpdate = true;
    },
    handleAddSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$ajax({
            url: this.$api.system.api.addApi,
            data: Object.assign({ }, values),
            success: (result) => {
              this.$message.success("新增成功");
              this.visible = false;
              this.loadList();
            },
          });
        } else {
          console.log(err);
        }
      });
    },
    handleUpdateSubmit(e) {
      e.preventDefault();
      this.formForUpdate.validateFields((err, values) => {
        if (!err) {
          this.$ajax({
            url: this.$api.system.api.updateApi,
            data: Object.assign(
              { id: this.tempForm.id },
              values
            ),
            success: (result) => {
              this.$message.success("修改成功");
              this.visibleForUpdate = false;
              this.loadList();
            },
          });
        } else {
          console.log(err);
        }
      });
    },
    remove(id) {
      this.$ajax({
        url: this.$api.system.api.deleteApi,
        data: { id },
        success: (result) => {
          this.$message.success("删除成功");
          this.loadList();
        },
      });
    },
    onClose() {
      this.visible = false;
    },
    onCloseForUpdate() {
      this.visibleForUpdate = false;
    },
    showData() {},
  }, // methods
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .search-form {
    display: flex;
    padding-bottom: 15px;
    :not(:first-child) {
      margin-left: 10px;
    }
  }
}
</style>